<template>
  <div class="pendingInquiry">
    <a-form
      layout="inline"
      :form="form"
      @submit="handleSubmit"
    >
      <div :class="!showAll?'ipt-box boxHeight':'ipt-box'">
        <a-form-item>
          <a-input
            v-decorator="['id']"
            placeholder="请输入品牌"
          />
        </a-form-item>
        <a-form-item>
          <a-input
            v-decorator="['inquiryId']"
            placeholder="请输入商品名称"
          />
        </a-form-item>
        <a-form-item>
          <a-input
            v-decorator="['name']"
            placeholder="请输入型号"
          />
        </a-form-item>
        <a-form-item>
          <a-input
            v-decorator="['memberName']"
            placeholder="请输入规格"
          />
        </a-form-item>
        <a-form-item>
          <a-input
            v-decorator="['goodsName']"
            placeholder="请输入SKU"
          />
        </a-form-item>

      </div>
      <div class="float-right">
        <a-button
          type="primary"
          id="search"
          html-type="submit"
        >查询</a-button>
        <a-button
          id="reset"
          @click="handleReset"
        >重置</a-button>
        <!-- <div
          class="expand"
          @click="showAll = !showAll"
        >
          {{expandWord()}}
          <a-icon
            v-if="!showAll"
            type="down"
          />
          <a-icon
            v-else
            type="up"
          />
        </div> -->
      </div>
    </a-form>
    <a-button
      type="primary"
      id="create"
    >上传图片</a-button>

    <a-button id="modify">修改类目</a-button>
    <div class="table-nav">
      已选择
      <span>{{selectedRowKeys.length}}</span>项
      <a @click="start">清空</a>
    </div>
    <a-table
      :rowSelection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange,fixed:true}"
      :pagination="{
            showQuickJumper:true,
         showSizeChanger:true,
        pageSize:20,
        pageSizeOptions:['10', '20', '30', '40']
        }"
      :columns="columns"
      :dataSource="data"
      :scroll="{ x: 3000,y:500}"
    >
      <template
        slot="id"
        slot-scope="text, record, index"
      >
        <a @click="jump(text)">{{text}}</a>
      </template>
      <a
        slot="action"
        slot-scope="text"
        href="javascript:;"
      >查看图片</a>
    </a-table>
  </div>
</template>
<script>
import moment from "moment";
const columns = [
  {
    title: "序列号",
    width: 150,
    dataIndex: "id",
    key: "id",
    scopedSlots: { customRender: "id" }
  },
  { title: "SKU", width: 150, dataIndex: "customerSku", key: "customerSku" },
  { title: "目录", dataIndex: "catalog", key: "catalog", width: 100 },
  {
    title: "品牌",
    dataIndex: "brand",
    key: "brand",
    width: 150
  },
  {
    title: "商品名称",
    dataIndex: "name",
    key: "name",
    width: 200
  },
  {
    title: "型号",
    dataIndex: "model",
    key: "model",
    width: 200
  },
  { title: "规格", dataIndex: "spec", key: "spec", width: 150 },
  {
    title: "单位",
    dataIndex: "unit",
    key: "unit",
    width: 100
  },
  { title: "包装", dataIndex: "package", key: "package", width: 150 },
  {
    title: "交货(天)",
    dataIndex: "delivery",
    key: "delivery",
    width: 100
  },
  {
    title: "讯包数量",
    dataIndex: "num",
    key: "num",
    width: 100
  },
  {
    title: "税前单价",
    dataIndex: "pretaxPrice",
    key: "pretaxPrice",
    width: 100
  },
  {
    title: "含税单价",
    dataIndex: "price",
    key: "price",
    width: 100
  },
  {
    title: "税率",
    dataIndex: "taxRate",
    key: "taxRate",
    width: 100
  },
  {
    title: "税前商品合计",
    dataIndex: "pretaxTotal",
    key: "pretaxTotal",
    width: 150
  },
  {
    title: "含税商品合计",
    dataIndex: "total",
    key: "total",
    width: 150
  },
  {
    title: "运费",
    dataIndex: "freightTotal",
    key: "freightTotal",
    width: 100
  },
  {
    title: "共计",
    dataIndex: "amount",
    key: "amount",
    width: 100
  },
  {
    title: "备注",
    dataIndex: "description",
    key: "description",
    width: 100
  },
  {
    title: "过期时间",
    dataIndex: "expire",
    key: "expire",
    width: 100
  },
  {
    title: "供应商",
    dataIndex: "vendorName",
    key: "vendorName",
    width: 100
  },
  {
    title: "查看图片",
    key: "images",
    fixed: "right",
    width: 100,
    scopedSlots: { customRender: "action" }
  }
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    id: `0000${i}`,
    customerSku: `123321`,
    catalog: "目录",
    brand: "格力 ",
    name: "空调",
    model: "006A",
    spec: "110",
    unit: "个",
    package: "盒子",
    delivery: "7",
    num: "20",
    pretaxPrice: "100",
    price: "110",
    taxRate: "13%",
    pretaxTotal: "700",
    total: "7900",
    freightTotal: "10",
    amount: "1000",
    description: "买一点",
    expire: "72020-07-09 00:00:00",
    vendorName: "上海汽修"
  });
}

export default {
  data() {
    return {
      data,
      columns,
      selectedRowKeys: [],
      form: this.$form.createForm(this),
      dateFormat: "YYYY/MM/DD",
      monthFormat: "YYYY/MM",
      pickerPlaceholder: ["开始日期", "结束日期"],
      showAll: false
    };
  },
  methods: {
    moment,
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    create() {
      this.$router.push("../Inquiry/inquiryCreate");
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
        }
      });
    },
    expandWord() {
      if (this.showAll == false) {
        return "展开";
      } else {
        return "收起";
      }
    },
    handleReset() {
      this.form.resetFields();
    },
    start() {
      this.selectedRowKeys = [];
    },
    jump(id) {
      this.$router.push("../Inquiry/inquiryDetail/" + id);
    },
    total(total, range) {
      console.log(total);
      console.log(range);
      return `总共${range}页`;
    }
  }
};
</script>
<style scope>
.pendingInquiry {
  padding: 24px 32px;
  background-color: white;
}
.boxHeight {
  height: 42px;
  overflow: hidden;
}
.ant-form {
  position: relative;
}
.ipt-box {
  margin-bottom: 16px;
  margin-right: 200px !important;
}
.ant-btn {
  margin: auto 10px 10px auto;
}
.float-right {
  width: 200px;
  position: absolute;
  right: 0px;
  top: 4px;
}
.expand {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  color: #1890ff;
}
.table-nav {
  background-color: #e6f7ff;
  border: 1px solid #bae7ff;
  padding: 5px 30px;
  border-radius: 3px;
  margin-bottom: 10px;
}
.table-nav span {
  margin: auto 3px;
}
.table-nav span,
.table-nav a {
  color: #2595fd;
}
.table-nav a {
  margin-left: 15px;
}
.ant-form-inline .ant-form-item {
  margin-right: 24px !important;
}
</style>
